<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充电插座插孔瞬时日志</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
#parse('/headFiles.html')
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchPanel" wid100>
            <div class="layui-inline">
                <label class="layui-form-label">选择时间</label>
                <div class="layui-input-block">
                    <input type="text" id="tjDay" name="tjDay" autocomplete="off" class="layui-input"
                           placeholder="年-月-日">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">选择时间(24H)</label>
                <div class="layui-input-block">
                    <input type="text" name="hh" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">设备序列号</label>
                <div class="layui-input-block">
                    <input type="text" name="deviceSn"  class="layui-input" value="$!{deviceSn}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">插座号</label>
                <div class="layui-input-block">
                    <input type="text" name="slotNum" class="layui-input" value="$!{slotNum}">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div><!-- /.layui-card -->
    <div class="layui-card">
        <div class="layui-card-header">插座瞬时功率</div>
        <div class="layui-card-body">
            <div id="power-panel" style="width: 100%;height:400px;"></div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">插座瞬时电流</div>
        <div class="layui-card-body">
            <div id="current-panel" style="width: 100%;height:400px;"></div>
        </div>
    </div>
</div>
#parse('/footFiles.html')
<script type="text/javascript">
layui.config({
    base: '$!{webRoot}/layuiadmin/'
    ,webRoot:'$!{webRoot}'
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'laydate', 'table', 'form','echarts'], function () {
    var $ = layui.$, table = layui.table, laydate = layui.laydate, form = layui.form,echarts = layui.echarts;

    //年月选择器
    laydate.render({
        elem: '#tjDay'
        , type: 'date'
        , value: new Date()
    });

    // 查询按钮
    $('#search').click(() => {
        var day = $('#tjDay').val();
        var deviceSn = $('input[name="deviceSn"]').val();
        var slotNum = $('input[name="slotNum"]').val();
        var hh = $('input[name="hh"]').val();
        if (day && deviceSn && slotNum) {
            var loadIndex = layer.msg('处理中...', {shade: [0.8, '#393D49'], time: 60 * 60 * 1000});
            $.ajax({
                async: false,
                url: '$!{webRoot}/cdcz/use_logs/chart.data',
                data: {day: day, deviceSn: deviceSn, slotNum: slotNum,hh:hh},
                success: function (res) {
                    layer.close(loadIndex);
                    if (res.code == 200) {
                        console.log(res);
                        setPowerChartData(res.body.times, res.body.powerData);
                        setCurrentChartData(res.body.times, res.body.currentData);
                    }
                }
            });
        } else {
            layer.msg('请填写正确的查询条件', {icon: 2});
        }
    });

    function setPowerChartData(times, data) {
        var powerPanel = document.getElementById('power-panel');
        var powerPanelChart = echarts.init(powerPanel);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: times,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                //max: data,
                min: 0,
                splitNumber: 5,
                boundaryGap: [0.2, 0.2]
            },
            series : [{
                name:'Power',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: data
            }]
        };
        powerPanelChart.setOption(option);
    }

    function setCurrentChartData(times, data) {
        var currentPanel = document.getElementById('current-panel');
        var currentPanelChart = echarts.init(currentPanel);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: times,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                //max: data,
                min: 0,
                splitNumber: 5,
                boundaryGap: [0.2, 0.2]
            },
            series : [{
                name:'Current',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: data
            }]
        };
        currentPanelChart.setOption(option);
    }
});
</script>

</body>
</html>